<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <style>
 	html,body{
 	 	height:100%;
	}
	
	body{
  	padding-top:50px; /*padding for navbar*/
    }
	#main, #main>.row {
	height:100%;
	}
	
      #map-canvas {
        width: 100%;
        height: 700px;
         position:absolute;
         right: 0;
         top:0;
      }
      
      #left {
		height:100%;
   		overflow-y:scroll;
	  }
 </style>
 
 <!-- Bootstrap Core CSS -->
    <link href="<c:url value='/resources/css/bootstrap.min.css'/>" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/earlyaccess/jejugothic.css">    
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
      function initialize() {
        var mapCanvas = document.getElementById('map-canvas');
        var mapOptions = {
          center: new google.maps.LatLng(44.5403, -78.5463),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <!-- jQuery -->
    <script src="<c:url value='resources/js/jquery-1.11.1.min.js'/>"></script>  
    <!-- Bootstrap Core JavaScript -->
     <script src="<c:url value='resources/js/bootstrap.min.js'/>"></script>
  	
  <title>Insert title here</title>
</head>
<body>
<%@ include file="../include/header.jsp"%>
 <!-- Page Content -->
   <div class="container-fluid" id="main">
 <!--  <h1>header영역</h1>
  <p>Resize the browser window to see the effect.</p> -->
  <div class="row">
    <div class="col-sm-4" id="left">
     <div class="panel panel-default">
      <div class="panel-heading"> 다음과 같은 곳을 보여주세요: <a href="">날짜</a> <a href="">지역</a> <a href="">관심사</a></div>
     </div>
    
     <!-- item list -->
     <div>
        카테고리 이미지 &nbsp; 모임 상태 <br>
        모임 제목<br>
        모임 장소<br>
        모임 날짜 &nbsp; 모임 인원수 <br>
      <hr>
    </div>    	
    	
    	
    </div><!-- left -->
    
    
    <div class="col-sm-8">
      <div id="map-canvas"></div>
    </div>
  </div>
</div>
    

</body>
</html>